<template>
	<!-- :class="{'pickerMask':visable}" @click="maskClick" @touchmove.stop.prevent="returnHandle" -->
	<view >
		<!-- :class="{'picker-show':visable}" -->
		<view class="picker-box" >
			<!-- <view class="operate-box" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
				<view class="time-box" @click="pickerCancel">
					<text>取消</text>
				</view>
				<view :style="{color:themeColor}" @click="pickerConfirm">确定</view>
			</view> -->
			<view class="operate-box1" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
					<view @click="touchSelect(0)" class="time-item time-item1" style="flex: 1;" :style="{'background':touchIndex==0?'#333844':'#F4F4F4',color:touchIndex==0?'#fff':'#111111'}">
						<text>开始时间</text>
						<text>{{resultDate[0]}}</text>
					</view>
					<view @click="touchSelect(1)" class="time-item time-item2"  style="flex: 1;" :style="{'background':touchIndex==1?'#333844':'#F4F4F4',color:touchIndex==1?'#fff':'#111111'}">
						<text>结束时间</text>
						<text>{{resultDate[1]}}</text>
					</view>
			</view>
			
			
			<picker-view :value="pickerValue" @change="pickerChange" class="picker-view" :indicator-style="indicatorStyle" @tap.stop="returnHandle">
				<picker-view-column>
				    <view class="picker-item" v-for="(item, index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
				    <view class="picker-item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
				</picker-view-column>
				<picker-view-column v-if="days.length > 0">
				    <view class="picker-item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
				</picker-view-column>
				<picker-view-column v-if="hours.length > 0">
				    <view class="picker-item" v-for="(item, index) in hours" :key="index">{{ item }}时</view>
				</picker-view-column>
				<picker-view-column v-if="minutes.length > 0">
				    <view class="picker-item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
				</picker-view-column>
			</picker-view>
			<view class="submit" @click="pickerConfirm">
				<text>提交</text>
			</view>
		</view>
	</view>
</template>
<script>
    export default {
        name: 'termPicker',
        props: {
			// visable: {
			// 	type: Boolean,
			// 	default: false
			// },
			defaultDate: {
				type: Array,
				default: () => []
			},
            minYear: {
                type: Number,
                default: 1990,
            },
			timeLimit: {
				type: Boolean,
				default: false
			},
			deferYear: {
				type: Number,
				default: 0,
			},
			themeColor:{
				type: String,
				default: '#FF2D03'
			},
			startText: {
				type: String,
				default: '开始时间'
			},
			endText: {
				type: String,
				default: '结束时间'
			}
        },
        data() {
            const date = new Date();
            const years = [];
            const year = date.getFullYear();
            const months = [];
            const month = date.getMonth() + 1;
            const day = date.getDate();
			const hours=[]
			const minutes=[]
			const maxYear = this.timeLimit ? year : year + this.deferYear
			console.log(maxYear)
            for (let i = this.minYear; i <= maxYear; i++) {
                years.push(i);
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i);
            }
			for(let i=10;i<24;i++){
				hours.push(i)
			}
			for(let i=0;i<60;i++){
				minutes.push(i)
			}
            return {
                indicatorStyle: 'height: 100rpx;',
                touchIndex: 0,
                year,
				month,
				day,
				hours,
				minutes,
				years,
                months,
                days: [],
				hour:[],
				minute:[],
				pickerValue: [],
				resultDate: [],
				hint_time:''
            };
        },
		mounted() {
			this.setDate()
		},
        methods: {
			returnHandle(){},
			setDate() {
				if (this.defaultDate.length > 0) {
					let date = this.defaultDate[0]
					
					// console.log(this.defaultDates)
					this.resultDate = this.defaultDate
					this.hint_time=this.defaultDate[0]
					this.setPicker(date)
					// this.setPicker(date1)
				} else {
					let month = this.month < 10 ? '0' + this.month : this.month
					let day = this.day < 10 ? '0' + this.day : this.day
					let hours = this.hours < 10 ? '0' + this.hours : this.hours
					let minute = this.minute < 10 ? '0' + this.minute : this.minute
					let nowTime = this.year + '-' + month + '-' + day +' '+hours+':'+minute
					this.resultDate = [nowTime, nowTime]
					this.setPicker(nowTime)
				}
			},
			setPicker(date) {
				
				const splitVal2 = date.split(':')
				let minute=this.minutes.indexOf(Number(splitVal2[1]))
				let splitVal1=splitVal2[0].split(' ')
				
				let hour=this.hours.indexOf(Number(splitVal1[1]))
				const splitVal =splitVal1[0].split('-')
				let year = this.years.indexOf(Number(splitVal[0]))
				
				let month = Number(splitVal[1]) - 1
				let day = Number(splitVal[2]) - 1
				
				this.pickerChange({
					detail: {
						value: [year, month, day,hour,minute]
					}
				})
			},
			touchSelect(val) {
				let date = this.resultDate[val]
				this.touchIndex = val
				this.setPicker(date)
			},
			getDateTime(date) {
				let year = this.years[date[0]]
				let month = this.months[date[1]]
				let day = this.days[date[2]]
				let hour=this.hours[date[3]]
				let minute=this.minutes[date[4]]
				if (month < 10) {
					month = '0' + month
				}
				if (day < 10) {
					day = '0' + day
				}
				if(hour<10){
					hour='0'+hour
				}
				if(minute<10){
					minute='0'+minute
				}
				// console.log(year + '-' + month + '-' + day+' '+hours+':'+minute)
				this.resultDate[this.touchIndex] =  year + '-' + month + '-' + day+' '+hour+':'+minute
				
			},
			pickerChange(e) {
			    const currents = e.detail.value
			    if (currents[1] + 1 === 2) {
			        this.days = []
			        if (
			            ((currents[0] + this.minYear) % 4 === 0 &&
			                (currents[0] + this.minYear) % 100 !== 0) ||
			            (currents[0] + this.minYear) % 400 === 0
			        ) {
			            for (let i = 1; i < 30; i++) {
			                this.days.push(i)
			            }
			        } else {
			            for (let i = 1; i < 29; i++) {
			                this.days.push(i)
			            }
			        }
			    } else if ([4, 6, 9, 11].some((item) => currents[1] + 1 === item)) {
			        this.days = []
			        for (let i = 1; i < 31; i++) {
			            this.days.push(i)
			        }
			    } else if (
			        [1, 3, 5, 7, 8, 10, 12].some((item) => currents[1] + 1 === item)
			    ) {
			        this.days = []
			        for (let i = 1; i < 32; i++) {
			            this.days.push(i)
			        }
			    }
				this.pickerValue = currents
				
				this.getDateTime(currents)
			},
			maskClick() {
				this.$emit('update:visable', false)
			},
            pickerConfirm() {
				const { resultDate, timeLimit } = this
				let startTime = new Date(resultDate[0].replace(/-/g, '/')).getTime()
				let endTime = new Date(resultDate[1].replace(/-/g, '/')).getTime()
				let nowTime = timeLimit ? new Date().getTime() : endTime
				let defaultTime=new Date(this.hint_time.replace(/-/g, '/')).getTime()
				if(defaultTime>startTime||defaultTime>endTime){
					uni.showToast({
						title: '请设置大于当前时间！',
						icon: 'none'
					})
				}else{
					if (startTime <= endTime && endTime <= nowTime) {
						this.$emit('confirm', resultDate)
						this.maskClick()
					} else {
						
						this.$emit('confirm', [resultDate[1],resultDate[0]])
						this.maskClick()
						
					}
				}
				
				
            },
			pickerCancel(){
				// this.$emit('cancel', resultDate)
				this.maskClick()
			}
        }
    }
</script>

<style lang="scss" scoped>
    .pickerMask {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
    }
    .picker-box {
        // position: fixed;
        // bottom: 0;
        // left: 0;
        // width: 100%;
        // transition: all 0.3s ease;
        // transform: translateY(100%);
        // z-index: 998;
    	.operate-box {
    	    display: flex;
    		align-items: center;
    		justify-content: space-between;
    	    padding: 18rpx 30rpx;
    	    background-color: #FFFFFF;
    	    text-align: center;
    	    font-size: 30rpx;
    		border-bottom: 2rpx solid #e5e5e5;
    		.time-box {
    			width: 82%;
    			display: flex;
    			align-items: center;
    			justify-content: space-between;
    			.time-item {
					
    				display: flex;
    				flex-direction: column;
    			}
    		}
    	}
		.operate-box1{
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 18rpx 30rpx;
			// background-color: #FFFFFF;
			text-align: center;
			font-size: 30rpx;
			border-bottom: 2rpx solid #e5e5e5;
			width:100%;
			.time-item {
				padding:23rpx 32rpx;
				display: flex;
				flex-direction: column;
			}
			.time-item1{
				text{
					justify-content: flex-start;
					align-self:flex-start;
				}
			}
			.time-item2{
				text{
					justify-content: flex-end;
					align-self: flex-end;
				}
			}
		}
    }
    .picker-show {
        transform: translateY(0);
    }
    .picker-view {
    	width: 750rpx;
    	height: 600rpx;
    	background-color: #FFFFFF;
    	.picker-item {
    		height: 100rpx;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		text-align: center;
    	}
    }
</style>